<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body style="margin: 0; padding: 0; background-color: #f5f5f5">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script>
      window.difyChatbotConfig = {
        token: "cVEFJlKZs6R3IogW",
        inputs: {},
        systemVariables: {
          user_id:
            (typeof localStorage !== "undefined" &&
              localStorage.getItem("userId")) ||
            undefined,
        },
        userVariables: {},
      };
    </script>
    <script
      src="https://udify.app/embed.min.js"
      id="cVEFJlKZs6R3IogW"
      defer
    ></script>
    <style>
      #dify-chatbot-bubble-button {
        background-color: #1c64f2 !important;
      }
      #dify-chatbot-bubble-window {
        width: 24rem !important;
        height: 40rem !important;
      }
    </style>
    <script>
      // 圆形气泡按钮可拖动
      (function enableDraggableBubble() {
        const tryBind = () => {
          const btn = document.getElementById("dify-chatbot-bubble-button");
          if (!btn) return false;
          btn.style.touchAction = "none";
          btn.style.cursor = "grab";

          let startX = 0,
            startY = 0,
            startLeft = 0,
            startTop = 0,
            dragging = false;

          const onPointerDown = (e) => {
            dragging = true;
            btn.setPointerCapture(e.pointerId);
            startX = e.clientX;
            startY = e.clientY;
            const rect = btn.getBoundingClientRect();
            startLeft = rect.left;
            startTop = rect.top;
            btn.style.cursor = "grabbing";
          };
          const onPointerMove = (e) => {
            if (!dragging) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            const newLeft = Math.min(
              window.innerWidth - btn.offsetWidth,
              Math.max(0, startLeft + dx)
            );
            const newTop = Math.min(
              window.innerHeight - btn.offsetHeight,
              Math.max(0, startTop + dy)
            );
            btn.style.position = "fixed";
            btn.style.left = newLeft + "px";
            btn.style.top = newTop + "px";
            btn.style.right = "auto";
            btn.style.bottom = "auto";
          };
          const onPointerUp = (e) => {
            dragging = false;
            btn.releasePointerCapture(e.pointerId);
            btn.style.cursor = "grab";
          };

          btn.addEventListener("pointerdown", onPointerDown);
          window.addEventListener("pointermove", onPointerMove);
          window.addEventListener("pointerup", onPointerUp);
          return true;
        };

        // 等待 Dify 脚本把按钮渲染出来
        const observer = new MutationObserver(() => {
          if (tryBind()) observer.disconnect();
        });
        observer.observe(document.body, { childList: true, subtree: true });
        // 兜底尝试
        setTimeout(tryBind, 1500);
      })();
    </script>
  </body>
</html>
